import styled from "styled-components";
import { Avatar } from "@/ui/cpts/std/Avatar";
import type { XHSNote } from "@common/models";
import dayjs from "dayjs";
import { clsx } from "clsx";
import { Typography, Image } from "antd";
import { transportMessageToDisplay } from "@/ui/utils/transportMessageToDisplay";

const Wrapper = styled.div`
  font-size: 12px;
  padding: 10px;
  cursor: pointer;
  transition: 200ms;

  &:hover,
  &.selected {
    background: whitesmoke;
  }

  .note-card {
    &__title {
      display: flex;
      align-items: center;
    }

    &__source {
      font-weight: bolder;
      margin-right: 4px;
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      align-items: center;
    }

    &__note-title {
      color: grey;
      width: 100%;
    }

    &__author-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 4px 0;
    }

    &__author {
      display: flex;
      align-items: center;
      font-weight: bolder;
    }

    &__create-time {
      color: grey;
    }

    &__content {
      margin-left: 29px;
    }

    &__unread {
      border-radius: 20px;
      min-width: 16px;
      height: 16px;
      font-size: 10px;
      color: white;
      font-weight: bolder;
      background: #ff7979;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .xhs-emoji {
    width: 1rem;
    height: 1rem;
    display: inline;
  }
`;

interface Props {
  note: XHSNote;
  unread?: number;
  onClick?: () => void;
  selected?: boolean;
}

export function NoteCard(props: Props) {
  const { note } = props;
  return (
    <Wrapper
      className={clsx("note-card", { selected: !!props.selected })}
      onClick={props.onClick}
    >
      <div className={"note-card__title"}>
        <div className={"note-card__note-title"}>
          {note?.title ? (
            <Typography.Text
              className={"note-card__note-title"}
              ellipsis={{ tooltip: note.title }}
              copyable={
                note.isDeleted
                  ? false
                  : {
                      text: `https://www.xiaohongshu.com/explore/${note.noteId}?xsec_token=${note.xsecToken}&xsec_source=pc_user`,
                      tooltips: ["复制笔记链接", "复制成功"],
                    }
              }
            >
              {note.title}
            </Typography.Text>
          ) : (
            "[加载中...]"
          )}
        </div>
      </div>
      <div className={"note-card__author-info"}>
        <div className={"note-card__author"}>
          <Avatar src={note.user.avatar} alt={"X"} />
          <Typography.Text
            copyable={
              note.user.userId
                ? {
                    text: `https://www.xiaohongshu.com/user/profile/${note.user.userId}`,
                    tooltips: ["复制用户主页链接", "复制成功"],
                  }
                : false
            }
            style={{ marginLeft: 4 }}
          >
            {note.user.nickname}
          </Typography.Text>
        </div>
        {!!props.unread && (
          <div className={"note-card__unread"}>{props.unread}</div>
        )}
        <div className={"note-card__create-time"}>
          {note.time ? dayjs(note.time).fromNow() : ""}
        </div>
      </div>
      <div className={"note-card__content"}>
        {note.isDeleted ? null : (
          <Typography.Paragraph
            ellipsis={{
              rows: 2,
              expandable: "collapsible",
            }}
            onClick={(e) => e.stopPropagation()}
          >
            {transportMessageToDisplay(note.desc)}

            {!!note.imageList?.length && (
              <span
                style={{ textAlign: "center", marginTop: 20, display: "block" }}
              >
                <span style={{ display: "block" }}>
                  <Image.PreviewGroup
                    items={note.imageList.map((r) => r.urlDefault)}
                  >
                    <Image width={150} src={note.imageList[0].urlDefault} />
                  </Image.PreviewGroup>{" "}
                </span>
                <span style={{ display: "block" }}>
                  <strong>
                    共{note.imageList.length}张图片，点击图片可查看
                  </strong>
                </span>
              </span>
            )}
          </Typography.Paragraph>
        )}
      </div>
    </Wrapper>
  );
}
